<template>
	<view class="container">
		<view class="backgroud-top">
			<view class="container-header">
				<view class="header-content">
					<view class="back-button" @click="goBack()">
						<u-icon name="arrow-left" color="#000" size="20"></u-icon>
					</view>
					<view class="title">
						申请本地向导
					</view>
					<view class="back-button-right">
						常见问题
					</view>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="step-content">
				<liu-step-bar :step="currentStep" :stepList="stepList"></liu-step-bar>
			</view>


			<!-- 第一步  个人资料认证 -->
			<view class="step-content" v-show="currentStep == 1">
				<view class="step-content-left">
					<view class="top">
						拥有本地人身份
					</view>
					<view class="bottom">
						成功申请为本地人身份
					</view>
				</view>
				<view class="step-content-right" :class="true ? 'is-active' : ''">
					已认证
				</view>
			</view>

			<view class="step-content" v-show="currentStep == 1">
				<view class="step-content-left">
					<view class="top">
						向导认证城市
					</view>
					<view class="bottom">
						一个账号只能认证一个向导身份
					</view>
				</view>
				<view class="notSelectCity" :class="{ 'SelectCity': selectedCityText !== '请选择' }"
					@click="OpenCitySelected()">
					<view>
						{{ selectedCityText }}
					</view>
					<u-icon class="SelectCity-icon" name="arrow-right"
						:color="selectedCityText !== '请选择' ? 'rgba(255, 179, 39, 1)' : '#000'" size="26rpx">
					</u-icon>
				</view>
			</view>

			<view class="step-content" v-show="currentStep == 1">
				<view class="step-content-left">
					<view class="centet">
						阅读“本地熊”本地向导相关规范
					</view>
				</view>
				<view class="step-content-right" :class="true ? 'is-active' : ''">
					已完成
				</view>
			</view>

			<view class="step-content" v-show="currentStep == 1">
				<view class="step-content-left">
					<view class="top">
						上传头像
					</view>
					<view class="bottom">
						上传本人真实照片（五官清晰）
					</view>
				</view>
				<view class="step-content-right-upload">
					<view class="step-content-right-upload-left">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1" width="100rpx" height="100rpx">
							<image src="/static/authentication/expertInformation-upLoadPicture.png" mode="widthFix"
								style="width: 100rpx;height: 100rpx;"></image>
						</u-upload>
					</view>
					<view class="step-content-right-upload-right">
						<u-icon name="arrow-right" color="rgba(0, 0, 0, 1)" size="14" bold></u-icon>
					</view>
				</view>
			</view>



			<!-- 第二步  身份认证 -->
			<view class="step-content-second" v-show="currentStep == 2">
				<view class="step-content-second-header">
					<view class="step-content-second-header-top">
						身份认证
					</view>
					<view class="step-content-second-header-bottom">
						按照监管要求，请先进行身份认证
					</view>
				</view>

				<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="请输入姓名" shape="circle" v-model="queryParams.name"
					style="background-color: rgba(248, 248, 248, 1);margin: 0 30rpx 30rpx;height: 80rpx;padding: 0 30rpx;"
					border="none" fontSize="26rpx">
				<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input placeholder="请输入姓名" shape="circle" style="background-color: rgba(248, 248, 248, 1);"
						border="none" fontSize="26rpx" v-model="queryParams.name">
					<!-- #endif -->
						<u--text text="姓名" slot="prefix" margin="0 3px 0 0" type="tips" style="width: 140rpx;"
							size="26rpx"></u--text>
				<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->

				<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="请输入证件号码" shape="circle"
					style="background-color: rgba(248, 248, 248, 1);margin: 0 30rpx;height: 80rpx;padding: 0 30rpx;"
					border="none" fontSize="26rpx" v-model="queryParams.code">
				<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input placeholder="请输入证件号码" shape="circle" style="background-color: rgba(248, 248, 248, 1);"
						border="none" fontSize="26rpx" v-model="queryParams.code">
					<!-- #endif -->
						<u--text text="证件号码" slot="prefix" margin="0 3px 0 0" type="tips" style="width: 140rpx;"
							size="26rpx"></u--text>
				<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->

				<view class="step-content-second-center">
					<image src="/static/authentication/upLoadId.png" mode=""></image>
				</view>

				<view class="step-content-second-footer">
					<view class="step-content-second-footer-item">
						<view class="top-image">
							<image src="/static/authentication/mask-first.png" mode=""></image>
						</view>
						<view class="bottom-title">
							请勿佩戴墨镜
						</view>
					</view>

					<view class="step-content-second-footer-item">
						<view class="top-image">
							<image src="/static/authentication/mask-second.png" mode=""></image>
						</view>
						<view class="bottom-title">
							不可拍照模糊
						</view>
					</view>

					<view class="step-content-second-footer-item">
						<view class="top-image">
							<image src="/static/authentication/mask-third.png" mode=""></image>
						</view>
						<view class="bottom-title">
							不要光线过暗
						</view>
					</view>
				</view>
			</view>


			<!-- 其他资料 -->
			<view class="step-content-third" v-show="currentStep == 3">
				<view class="step-content-second-header">
					<view class="step-content-second-header-top">
						相关行业经验
					</view>
					<view class="step-content-second-header-bottom">
						可简单叙述有关工作经历/自我介绍
					</view>
				</view>


				<view class="content-footer-hr-footer">
					<view class="My-textarea">
						<uni-easyinput type="textarea" v-model="queryParams.remark"
							placeholder="例：我曾在xx年-xx年，拥有x年专职导游经验，涵盖亲子家庭、银发群体、文化研学团队等不同人群类型。专业资质方面，目前持有xx证书等，可为特色线路设计提供专业支撑......"
							:inputBorder="false" maxlength="150"
							style="font-size: 26rpx;background-color:rgba(248, 248, 248, 1);"></uni-easyinput>
						<view class="inputCount">
							{{ queryParams.remark.length || 0 }}/150
						</view>
					</view>
				</view>

				<view class="step-content-second-header">
					<view class="step-content-second-header-top">
						补充资料
					</view>
					<view class="step-content-second-header-bottom">
						可上传导游证/语言类证书/医护证书/旅行社营业执照/从业证明等证件
					</view>
				</view>

				<view class="content-footer-hr-footer">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1">
						<image src="/static/authentication/expertInformation-upLoadPicture.png" mode="widthFix"
							style="width: 144rpx;height: 144rpx;"></image>
					</u-upload>
				</view>

			</view>

		</view>
		<u-picker :show="showSelectCity" :columns="currentPersonCity" @confirm="selectCityOnly"
			@cancel="showSelectCity = false"></u-picker>
		<view class="footer-btn-wrapper" @click="handleEmit(currentStep)">
			<view class="footer-btn">
				{{ currentStep == 1 ? '下一步' : currentStep == 2 ? '开始识别' : currentStep == 3 ? '提交申请' : ''}}
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config/index.js'
	import {
		getPersonByUserId,
		getGuide,
		postGuide
	} from '@/request/api.js';
	export default {
		data() {
			return {
				queryParams: {
					remark: '',
					imageList: [],
					code: '',
					name: ''
				},
				fileList1: [],
				currentStep: 0,
				stepList: [{
						name: '个人资料认证',
						id: 1,
						checkedImg: '/static/authentication/first-active.png',
						unCheckedImg: '/static/authentication/first.png',
						checkedColor: 'rgba(252, 196, 65, 1)',
						unCheckedColor: 'rgba(41, 41, 48, 1)',
						checkedLine: 'rgba(252, 196, 65, 1)',
						unCheckedLine: 'rgba(191, 191, 191, 1)',
						checkedImgWidth: '40rpx',
						checkedImgHeight: '40rpx',
						unCheckedImgWidth: '40rpx',
						unCheckedImgHeight: '40rpx',
					},
					{
						name: '身份认证',
						id: 2,
						checkedImg: '/static/authentication/second-active.png',
						unCheckedImg: '/static/authentication/second.png',
						checkedColor: 'rgba(252, 196, 65, 1)',
						unCheckedColor: 'rgba(41, 41, 48, 1)',
						checkedLine: 'rgba(252, 196, 65, 1)',
						unCheckedLine: 'rgba(191, 191, 191, 1)',
						checkedImgWidth: '40rpx',
						checkedImgHeight: '40rpx',
						unCheckedImgWidth: '40rpx',
						unCheckedImgHeight: '40rpx',
					},
					{
						name: '其他资料',
						id: 3,
						checkedImg: '/static/authentication/third-active.png',
						unCheckedImg: '/static/authentication/third.png',
						checkedColor: 'rgba(252, 196, 65, 1)',
						unCheckedColor: 'rgba(41, 41, 48, 1)',
						checkedLine: 'rgba(252, 196, 65, 1)',
						unCheckedLine: 'rgba(191, 191, 191, 1)',
						checkedImgWidth: '40rpx',
						checkedImgHeight: '40rpx',
						unCheckedImgWidth: '40rpx',
						unCheckedImgHeight: '40rpx',
					},
				],
				selectedCityText: '请选择',
				showSelectCity: false,
				currentPersonCity: [],
			};
		},
		onReady() {

		},
		onLoad(options) {
			// this.setStatusBarWhite();
			this.initData()
		},
		onReachBottom() {},
		methods: {
			async getStepOne() {
				try {
					const res = await getGuide(this.$store.state.userInfo.userId);
					return res; // 现在可以正确返回结果
				} catch (error) {
					console.error('获取本地向导资料失败:', error);
					throw error;
				}
			},
			OpenCitySelected() {
				if (this.currentStatusText == '待审核') {
					return
				}
				this.showSelectCity = true
			},
			selectCityOnly(e) {
				this.selectedCityText = e.value[0]
				this.showSelectCity = false
				uni.setStorageSync('expertSelectedCity', this.selectedCityText);
			},
			// 修改 initData 中的调用方式
			initData() {
				this.currentStep = 1
				let params = {
					userId: this.$store.state.userInfo.userId,
				}
				getPersonByUserId(params).then(async res => {
					if (res.data.ClientUserPerson && res.data.ClientUserPerson.starts != 0) {
						this.currentStep = 1
						// 本地人身份可能有多个，需要处理当前认证的达人身份属于哪个城市的
						// 处理城市名称，去除"市"字
						const processCityName = (cityName) => {
							return cityName 
						};

						const domicile = processCityName(res.data.ClientUserPerson.domicile);
						const permanent = processCityName(res.data.ClientUserPerson.permanent);

						// 过滤掉空值，只保留有效城市名
						const validCities = [domicile, permanent].filter(city => city && city.trim());
						// 去重处理
						const uniqueCities = [...new Set(validCities)];

						if (uniqueCities.length > 0) {
							if (uniqueCities.length === 1) {
								this.currentPersonCity = [uniqueCities];
							} else {
								this.currentPersonCity = [uniqueCities];
							}
						} else {
							this.currentPersonCity = [];
						}
					} else {
						// 本地人身份已认证，获取向导资料
						try {
							const stepOne = await this.getStepOne()
							// 如果上传过头像，则当前step为2，否则为1
							if (stepOne.data.code == 200 && stepOne.data.data && stepOne.data.data.avatar) {
								this.queryParams.avatar = stepOne.data.data.avatar ? stepOne.data.data.avatar :
									''
								this.queryParams.name = stepOne.data.data.name ? stepOne.data.data.name : ''
								this.queryParams.code = stepOne.data.data.code ? stepOne.data.data.code : ''
								this.queryParams.remark = stepOne.data.data.remark ? stepOne.data.data.remark :
									''
								this.queryParams.fileImage = stepOne.data.data.fileImage ? stepOne.data.data
									.fileImage : ''
								if (this.queryParams.name && this.queryParams.code) {
									this.currentStep = 3
									if (stepOne.data.data.fileImage) {
										this.fileList1 = [{
											url: stepOne.data.data.fileImage,
											status: 'success',
											message: ''
										}];
									}
								} else {
									this.currentStep = 2
								}

							} else {
								this.currentStep = 1
							}


							// 在这里处理stepOne的结果
						} catch (error) {
							console.error('获取向导资料失败:', error);
						}
					}
				}).catch(error => {
					console.error('获取认证状态失败:', error);
					// 请求失败时的默认状态
					// 注意：这两个变量在data中不存在，可能需要添加
					// this.personInformationBtnText = '去认证';
					// this.isPersonalInfoCompleted = false;
				});

				this.changeStepStyle()
			},
			handleEmit(currentStep) {
				switch (currentStep) {
					case 1:
						this.stepOneBtn()
						break;
					case 2:
						this.stepTwoBtn()
						break;
					case 3:
						this.stepThreeBtn()
						break;
					default:
						console.warn('未知步骤');
				}
			},

			// 个人资料认证底部按钮
			stepOneBtn() {
				// 根据页面内容状态判断是否进入第二步
				let params = {
					userId: this.$store.state.userInfo.userId,
					avatar: this.queryParams.imageList[0],
					address:this.selectedCityText
				}
				postGuide(params).then(res => {
					if (res.data.code == 200) {
						this.currentStep = 2;
						// 当第一步提交成功后清空upload组件中的fileList1: [],
						this.fileList1 = []
						this.queryParams.imageList = []

					}
				})
			},
			// 个人资料认证底部按钮
			stepTwoBtn() {
				// 根据页面内容状态判断是否进入第二步
				let params = {
					userId: this.$store.state.userInfo.userId,
					name: this.queryParams.name,
					code: this.queryParams.code
				}
				postGuide(params).then(res => {
					if (res.data.code == 200) {
						this.currentStep = 3;
					}
				})
				// 开始识别：调用身份认证接口或跳转
				// uni.showToast({
				// 	title: '开始人脸识别...',
				// 	icon: 'loading'
				// });
				// // 示例：模拟识别成功后跳转
				// setTimeout(() => {
				// 	this.currentStep = 3;
				// 	uni.showToast({
				// 		title: '识别成功',
				// 		icon: 'success'
				// 	});
				// }, 2000);
			},

			// 其他资料 底部按钮
			stepThreeBtn() {
				if (!this.queryParams.remark.trim()) {
					uni.showToast({
						title: '请填写相关经验',
						icon: 'none'
					});
					return;
				}

				if (this.fileList1.length === 0) {
					uni.showToast({
						title: '请上传补充资料',
						icon: 'none'
					});
					return;
				}

				let params = {
					userId: this.$store.state.userInfo.userId,
					fileImage: this.queryParams.imageList[0],
					remark: this.queryParams.remark,
					guideStarts: 3
				}
				postGuide(params).then(res => {
					if (res.data.code == 200) {
						// 正常提交
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 1000
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				})

			},
			changeStepStyle() {
				// 更新当前步骤的样式
				if (this.currentStep >= 1 && this.currentStep <= this.stepList.length) {
					const index = this.currentStep - 1;
					const stepNames = ['first', 'second', 'third'];

					this.stepList[index].checkedImg = `/static/authentication/${stepNames[index]}-current.png`;
					this.stepList[index].checkedImgWidth = "52rpx";
					this.stepList[index].checkedImgHeight = "52rpx";

					// 前两个步骤需要修改线条颜色
					if (this.currentStep < 3) {
						this.stepList[index].checkedLine = 'rgba(191, 191, 191, 1)';
					}
				}
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;

				// 先添加到文件列表，设置为上传中状态
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});

				for (let i = 0; i < lists.length; i++) {
					try {
						const result = await this.uploadFilePromise(lists[i].url);
						let item = this[`fileList${event.name}`][fileListLen];
						this[`fileList${event.name}`].splice(
							fileListLen,
							1,
							Object.assign(item, {
								status: "success",
								message: "",
								url: result,
							})
						);
					} catch (error) {
						// 上传失败时更新文件状态
						let item = this[`fileList${event.name}`][fileListLen];
						this[`fileList${event.name}`].splice(
							fileListLen,
							1,
						);
						// 同时显示错误提示
						uni.showToast({
							title: error.message || '上传失败',
							icon: 'none'
						});
					}
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				let _that = this
				const base_url = config.baseURL
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: base_url + '/qnyUpload/upload',
						filePath: url,
						name: "file",
						header: {
							'Authorization': uni.getStorageSync('token') || '',
							'Accept': 'application/json'
						},
						success: (res) => {
							console.log(res);
							// 检查HTTP状态码
							if (res.statusCode === 413) {
								reject(new Error('图片过大，请选择较小的图片'));
								return;
							}

							// 检查其他错误状态码
							if (res.statusCode !== 200) {
								reject(new Error(`上传失败，状态码：${res.statusCode}`));
								return;
							}

							try {
								// 解析服务器返回的数据
								const responseData = typeof res.data === 'string' ? JSON.parse(res
									.data) : res.data;

								// 检查响应状态
								if (responseData.code === 200) {
									// 成功获取网络地址
									const imageUrl = responseData.url;
									// 将图片URL添加到imageList数组中
									if (imageUrl) {
										this.queryParams.imageList.push(imageUrl);
									}
									resolve(imageUrl);
								} else {
									// 业务逻辑错误
									console.error('上传失败:', e);
									reject(new Error(responseData.msg || '上传失败'));
								}
							} catch (error) {
								// 解析失败
								console.error('响应数据解析失败:', error);
								reject(new Error('服务器响应格式错误'));
							}
						},
						fail: (err) => {
							// 网络请求失败
							// 根据错误类型提供更具体的错误信息
							if (err.errMsg && err.errMsg.includes('request:fail')) {
								reject(new Error('网络连接失败，请检查网络设置'));
							} else {
								reject(new Error('网络请求失败'));
							}
						}
					});
				});
			},
			// 删除图片
			deletePic(event) {
				const deleteFile = event.file
				if (deleteFile && deleteFile.url) {
					const urlIndex = this.queryParams.imageList.indexOf(deleteFile.url);
					if (urlIndex > -1) {
						this.queryParams.imageList.splice(urlIndex, 1);
					}
				}
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			goBack() {
				uni.navigateBack()
			},
			setStatusBarWhite() {
				// 设置状态栏前景色为白色
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000000',
					animation: {
						duration: 200,
						timingFunc: 'easeIn'
					}
				});
			},

			setStatusBarBlack() {
				// 如果需要切换回黑色
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 200,
						timingFunc: 'easeIn'
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	.container {
		height: 100%;

		.backgroud-top {
			background: linear-gradient(to bottom, rgba(252, 196, 65, 1), rgba(253, 225, 160, 1), rgba(255, 255, 255, 1));
			height: 484rpx;

			.container-header {
				height: calc(var(--status-bar-height) + 60rpx);
				display: flex;
				align-items: flex-end;
				padding-bottom: 30rpx;

				.header-content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					padding: 0 30rpx;
					position: relative;
					/* 添加相对定位 */

					.back-button {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 40rpx;
						/* 确保左侧按钮不占用过多空间 */
						flex-shrink: 0;
					}

					.back-button-right {
						display: flex;
						align-items: center;
						justify-content: center;
						color: #000000;
						font-weight: 400;
						font-size: 24rpx;
						height: 40rpx;
						line-height: 40rpx;
						/* 确保右侧按钮不占用过多空间 */
						flex-shrink: 0;
					}

					.title {
						font-weight: bold;
						font-size: 30rpx;
						color: rgba(0, 0, 0, 0.9);
						/* 绝对定位使标题真正居中 */
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						/* 防止标题过长影响布局 */
						white-space: nowrap;
						/* 确保标题在其他元素之上 */
						z-index: 1;
					}
				}
			}
		}

		.content {
			margin-top: -340rpx;

			.step-content {
				margin: 40rpx 30rpx 0;
				background-color: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				box-shadow: 0 4rpx 24rpx -2rpx rgba(153, 153, 153, 0.2);
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 160rpx;

				.step-content-left {
					height: 90rpx;
					margin-left: 30rpx;

					.top {
						font-weight: bold;
						font-size: 30rpx;
						line-height: 45rpx;
						color: rgba(0, 0, 0, 1);
					}

					.bottom {
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(120, 120, 130, 1);
						line-height: 45rpx;
					}

					.centet {
						font-weight: bold;
						font-size: 30rpx;
						line-height: 90rpx;
					}
				}

				.step-content-right {
					margin-right: 30rpx;
					height: 50rpx;
					width: 110rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 50rpx;
					text-align: center;
					border-radius: 30rpx;
					background-color: rgba(237, 238, 239, 1);
				}

				// 未选择城市样式
				.notSelectCity {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #787882;
					font-size: 26rpx;
					line-height: 30rpx;
					margin-right: 30rpx;
				}

				// 已选择或默认选择样式
				.SelectCity {
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgba(255, 179, 39, 1);
					font-size: 28rpx;
					line-height: 30rpx;
				}

				// 选择城市的右箭头
				.SelectCity-icon {
					margin-top: 2rpx;
					margin-left: 10rpx;
				}

				.is-active {
					background-color: rgba(252, 196, 65, 1);
				}

				.step-content-right-upload {
					display: flex;
					align-items: center;
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;

					.step-content-right-upload-left {
						width: 100rpx;
						height: 100rpx;
						margin-right: 20rpx;
					}

					.step-content-right-upload-right {}
				}
			}


			.step-content-second {
				margin: 40rpx 30rpx 0;
				background-color: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				box-shadow: 0 4rpx 24rpx -2rpx rgba(153, 153, 153, 0.2);

				.step-content-second-header {
					padding: 40rpx 30rpx;

					.step-content-second-header-top {
						font-weight: bold;
						font-size: 30rpx;
						line-height: 45rpx;
						color: rgba(0, 0, 0, 1);
					}

					.step-content-second-header-bottom {
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(77, 77, 86, 1);
						line-height: 45rpx;
					}
				}

				.step-content-second-center {
					width: 280rpx;
					height: 280rpx;
					margin: 45rpx auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.step-content-second-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 20rpx 30rpx;
					padding-bottom: 20rpx;

					.step-content-second-footer-item {
						width: 144rpx;
						height: 144rpx;

						.top-image {
							width: 100rpx;
							height: 100rpx;
							margin: 0 22rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.bottom-title {
							font-weight: 400;
							font-size: 24rpx;
							line-height: 36rpx;
							color: rgba(120, 120, 130, 1);
						}
					}
				}
			}

			.step-content-third {
				margin: 40rpx 30rpx 0;
				padding-bottom: 40rpx;
				background-color: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				box-shadow: 0 4rpx 24rpx -2rpx rgba(153, 153, 153, 0.2);

				.step-content-second-header {
					padding: 40rpx 30rpx 20rpx;

					.step-content-second-header-top {
						font-weight: bold;
						font-size: 30rpx;
						line-height: 45rpx;
						color: rgba(0, 0, 0, 1);
					}

					.step-content-second-header-bottom {
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(77, 77, 86, 1);
					}
				}

				.input-box {
					background-color: rgba(248, 248, 248, 1);
				}

				.content-footer-hr-footer {
					padding: 0 30rpx 0;

					.My-textarea {
						background-color: rgba(248, 248, 248, 1);
						border-radius: 10rpx;
						padding: 10rpx;
						position: relative; // 添加相对定位

						.inputCount {
							position: absolute;
							bottom: 20rpx;
							right: 20rpx;
							font-size: 24rpx;
							color: #999;
							background-color: rgba(248, 248, 248, 0.8);
							padding: 4rpx 10rpx;
							border-radius: 6rpx;
						}
					}
				}
			}
		}


		/* 底部按钮固定容器 */
		.footer-btn-wrapper {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			padding: 20rpx 0 50rpx;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));

			/* 渐变背景 */

			.footer-btn {
				background-color: rgba(255, 179, 39, 1);
				font-weight: 900;
				font-size: 36rpx;
				line-height: 36rpx;
				padding: 30rpx 36rpx;
				text-align: center;
				width: 570rpx;
				border-radius: 40rpx;
				color: rgba(0, 0, 0, 1);
				box-shadow: 0 8rpx 20rpx rgba(255, 179, 39, 0.3);
			}
		}
	}
</style>